<template>
	<div id="app">
		<!--网页头部导航-->
		<header id='header'>
			<nav class='center'>
				<h1 class='logo'><a class='logoImg' @click='toIndex'>Show</a></h1>
				<div class='search'>
					<input type='text' class='searchText' placeholder='　输入作品名或作者' v-model='searchPro' @keyup.enter='toSearch(searchPro)'>
					<input type="image" name="imageField" class='searchBtn' src="../../../static/img/search.png" @click='toSearch(searchPro)'>
				</div>
				<div>
					<ul class='navList'>
						<li class='active'><a @click='toIndex'>首页</a></li>
						<li><a @click='toList(1)'>新媒体</a></li>
						<li><a @click='toList(2)'>游戏</a></li>
						<li><a @click='toList(3)'>动漫</a></li>
					</ul>
				</div>

				<!-- 登陆前 -->
				<span v-if="!isLogin" class='loginBefore'><a href='javascript:void(0)' >登录/注册</a></span>
				<div class='loginAfter' v-if="isLogin" @mouseover="showList" @mouseout="hideList">
					<ul>
						<img src='../../assets/img/1.jpg' class='headImg'>
						<li>{{userInfo.name}}</li>
						<li>
							<ul class='playNav' :style="{display : isNone}">
								<li>
									<router-link to="/userinfo">个人主页</router-link>
								</li>
								<li>
									<router-link to="/upload">作品上传</router-link>
								</li>
								<li>
									<router-link to="/user">个人设置</router-link>
								</li>
								<li><a href="javascript:void(0)" @click="logout()">退出登录</a></li>
							</ul>
						</li>
					</ul>
				</div>

			</nav>
		</header>
		<!--登录注册框-->
		<div id='loginDiv'>
			<div class='loginLeft'>
				<h2>登录</h2>
				<div class='loginForm'>
					<div name='upload' action="" method="post">
						<table >

							<tr>
								<td>用户名：</td>
								<td><input type='text' class='required userName' name='userLoginName' placeholder="请输入用户名" v-model="logName">
								</td>
								<td>

								</td>
							</tr>

							<tr>
								<td>密码：</td>
								<td><input type='password' id='userRegistPwd' class='required' name='userLoginPwd' placeholder="请输入密码" v-model="logPwd"  @keyup.enter="login()">
								</td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td>
									<input type="button" class="editSubmit" value='登录' @click="login()"/>
								</td>
							</tr>
							
						</table>
						<h4>{{warning1}}</h4>
					</div>
				</div>
				<span class='turnRegister'>前往注册</span>
			</div>
			<div class='registerRight'>
				<h2>注册</h2>
				<div class='registerForm'>
					<div name='upload' action="" method="post">
						<table>

							<tr>
								<td>用户名：</td>
								<td><input type='text' class='required userName' name='userRegisterName' placeholder="请输入用户名" v-model="regName">
								</td>
								<td>

								</td>
							</tr>

							<tr>
								<td>登录密码：</td>
								<td><input type='password' id='userRegistPwd' class='required' name='userRegisterPwd' placeholder="请输入密码" v-model="regPwd">
								</td>
								<td>

								</td>
							</tr>
							<tr>
								<td>确认密码：</td>
								<td><input type='password' id='ReUserRegistPwd' class='required' name='ReUserRegistPwd' placeholder="请确认你的密码" v-model="confirmPwd">
								</td>
								<td>

								</td>
							</tr>
							<tr>
								<td>邮箱：</td>
								<td><input type='mail' id='email' class='required' name='userMail' placeholder="请输入邮箱" v-model="email" @keyup.enter="register()">
								</td>
								<td>

								</td>
							</tr>

							<tr>
								<td>

								</td>
								<td>
									<input type="button" class="editSubmit" value='注册' @click="register()"/>
								</td>
							</tr>

						</table>
						<h4>{{warning2}}</h4>
					</div>
				</div>
				<span class='turnLogin'>前往登录</span>
			</div>
		</div>
		<!--遮罩层-->
		<div class='hideDiv'></div>
	</div>
</template>

<script>
	import $ from "jquery";


	export default {
		name: 'app',
		data() {
			return {
				logName: "1234",
				logPwd: "123456",
				regName: "",
				regPwd: "",
				confirmPwd: "",
				email: "",
				warning1: "",
				warning2: "",
				isNone: 'none',
				searchPro:'',
			}
		},
		created() {
			require('../../assets/js/header.js')($);
		},
		computed: {
			isLogin() {
				return this.$store.state.userInfo == '' ? false : true;
			},
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		// watch : {
		// 	$route(newValue, oldValue){
		// 		//console.log(oldValue, newValue)
		// 		if(this.$route.query.column){
		// 			//this.$router.push({ path: '/result?title=' + data})
		// 		}
		// 	}
		// },
		methods: {
			toIndex: function () {
				this.$router.push({ path: '/' })
			},
			toList: function (data) {
				this.$router.push({ path: '/proList/' + data })
				
			},
			toSearch:function(data){
				this.$router.push({ path: '/result', query : {  title : data }})

			},
			validateRegister() {
				if (!/^.{1,10}$/.test(this.regName)) {
					this.warning2 = '用户名长度为1-10位';
					return false;
				}
				if (!/^.{6,20}$/.test(this.regPwd)) {
					this.warning2 = "密码长度为6-20位";
					return false;
				}
				if (!/^.{6,20}$/.test(this.confirmPwd) && this.regPwd != this.confirmPwd) {
					this.warning2 = "密码输入错误";
					return false;
				}
				if (!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.email)) {
					this.warning2 = "邮箱输入错误";
					return false;
				}
				this.warning2 = "";
				return true;
			},
			validateLogin() {
				if (!/^.{1,10}$/.test(this.logName)) {
					this.warning1 = '用户名长度为1-10位';
					return false;
				}
				if (!/^.{6,20}$/.test(this.logPwd)) {
					this.warning1 = "密码长度为6-20位";
					return false;
				}
				this.warning1 = "";
				return true;
			},
			//用户注册
			register() {
				if (this.validateRegister()) {
					this.$store.dispatch({
						type: "httpMethod",
						method: "post",
						url: "/user/register",
						data: {
							name: this.regName,
							pwd: this.regPwd
						},
						callback: (result) => {
							if (result.body.status == "ok") {
								this.warning2 = "注册成功";
							} else if (result.body.status == "fail") {
								this.warning2 = "用户名已存在"
							}
						}

					});
				}
			},

			//用户登录
			login() {
				if (this.validateLogin()) {
					this.$store.dispatch({
						type: 'httpMethod',
						method: 'post',
						url: '/user/login',
						data: {
							name: this.logName,
							pwd: this.logPwd
						},
						callback: (result) => {
						//	console.log(result);
							if (result.body.status == 'ok') {
								this.$store.commit({
									type: 'setUserInfo',
									userInfo: result.body.data.user,
								})
								sessionStorage.setItem('token', result.body.data.token);
								$('.hideDiv').click()

								this.warning1 = '登录成功';
								setTimeout(() => {
									this.warning1 = "";
								}, 1000);



							} else if (result.body.status == 'fail') {
								this.warning1 = result.body.data;
							}

						}
					})
				}
			},
			//显示下拉列表
			showList() {
				this.isNone = "block";
			},

			//隐藏下拉列表
			hideList() {
				this.isNone = "none";
			},

			//退出登录
			logout() {
				this.$store.dispatch({
					type: 'httpMethod',
					method: 'post',
					url: '/user/logout',
					callback: (result) => {
						if (result.body.status == 'ok') {
							console.log(result.body.data)
							require('../../assets/js/header.js')($);
							$('.hideDiv').click(function () {
								$('#loginDiv').toggle();
								$('.hideDiv').toggle();
							})
							$('.turnRegister').click(function () {
								$('.loginLeft').toggle();
								$('.registerRight').toggle();
							});
							$('.turnLogin').click(function () {
								$('.loginLeft').toggle();
								$('.registerRight').toggle();
							});
							sessionStorage.removeItem('token')
							this.$store.state.userInfo = false;
							this.$router.push('/')
						}

					}
				});
			}
		}

	}

	

</script>

<style>
	h4 {
		text-align: center;
		color: red;
		font-size: 13px;
		margin-top: 10px;
	}

</style>